/*-----------------Medida Para Desktop------------------------------------------------------------------------------------------*/
/*---------- codigo que se utiliza de forma general para los colores, tipo grafia, tamaño de letra y animaciones ------------*/ 
:root{
    --Ferreteria: #FAF179;
    --Restaurante : #504848;
    --Divisas: #48D107;
    --Tecnologia: #1877F2;
    --Parqueadero: #13C6A6;
    --Minimercado: #BC3081;
    --Comercializadoras: #FF6300;
    --Transporte: #5B52FF;
    --Serviciotec: #24E69A;
    --Obras: #FFB331;
    --figuras: #63DEEF;
    --figuras2: #6C8FF8;
    --DIz: #E85E5E;
    --DIz1: #EB3136;
    --DIz2: #CF0D0D;
    --DCentro: #3f3b3b;
    --DCentro1: #8D0202;
    --DDer: #8D0202;
    --Rojo: #D13143;
    --Despues: #EB3136;
    --Negro: #0000;
    --Blanco: #fff;
    --Gris: #E8E8E8;
    --Gris: rgb(0,0,0,1);
    --Menu: #CFD2CF;
    --BotonI: #71C2EA;
    --BotonD: #8D6CF8;
}

* {
    margin: 0;
    padding: 0;
  /* font-family:Georgia, 'Times New Roman', Times, serif;*/
   font-family:'Poppins','Regular';
   }

   p{font-size: 1.0em;}
h1{font-size: 1.0em;}
h2{font-size: 1.0em;}

section.main {
  max-height: 833px; /* Cambia el valor según tu preferencia */
  margin: 0 auto; /* Centra horizontalmente la sección */
}

/* ------------------ La pagina web se programa 1 para versiones moviles y despues se hace un media query para computadores de escritorio  MOBILE-FIRST-----------------------*/

   /* ------------------Boton flotante -------*/

#btn-mas {
    display: none;
   }
   
   .flotante {
    position: fixed;
    bottom: 150px;
    right: 10px;
   }
   
   .reds a,
   .btn-mas label {
    display: block;
    text-decoration: none;
    background: var(--Despues);
    color: var(--Blanco);
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.4);
    transition: all 500ms ease;
   }
   
   .reds a:hover {
    background: var(--Blanco);
    color: var(--Despues);
   }
   
   .reds a {
    margin-bottom: -15px;
    opacity: 0;
    visibility: hidden;
   }
   
   #btn-mas:checked~.reds a {
    margin-bottom: 10px;
    opacity: 1;
    visibility: visible;
   }
   
   .btn-mas label {
    cursor: pointer;
    background:var(--Despues);
    font-size: 23px;
   }
   
   #btn-mas:checked~.btn-mas label {
    transform: rotate(135deg);
    font-size: 25px;
   }
   /*---------------------Header----------------------------------*/

   header {
  background-color: #CFD2CF;
  }
  header .logo{
    margin: 0;
    padding: 20px, 25px;
    font-weight: bold;
    color: var(--Gris);
   }
   header .container{
    display: flex;
    flex-direction: column;
    align-items: center;
   }
   
   header nav {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-bottom: 10px; 
   }
   
   header a {
    padding: 1px 1px;
    font-size: 15px;
    text-decoration: none;
    font-weight: bold;
    color: var(--Gris);
   }
   
   header a:hover {
    color: var(--Gris);
   }
.container nav ul li a span {
 font-size: 20px;
 position: absolute;
 bottom: -5px;
 display: none;
 left: 0;
 right: 0;
 margin: auto;
}
  .container nav ul li  :hover span{
display: block;
        }
   
  /*  menu desplegable*/ 

  .submenu > h2 {
    color: #333; /* Elige un color adecuado */
    font-size: 1em; /* Ajusta el tamaño de fuente según sea necesario */
    text-align: center; /* Centrar el texto si es necesario */
    padding: 10px; /* Añadir algo de padding para separarlo de los otros elementos */
    margin-top: 0; /* Ajusta el margen superior si es necesario */
  }
 
  .container nav ul li{ 
    cursor: pointer;
   }
   .cont-ul {
    display: flex;
    align-items: center;
   }
   
   li {
    list-style: none;
    padding: 1.0vw;
    transition: all .3s ease 0s;
     white-space: nowrap; /* Agregada propiedad para evitar salto de línea */
   }
   
  .container nav ul li:hover {
    background-color: rgb(255, 255, 255);
   }
   .develop > a {
    text-decoration: none; /* Quita el subrayado por defecto */
    position: relative; /* Posicionamiento relativo para la línea */
    color: black; /* Color inicial de la letra */
}

.develop > a::after {
    content: ''; /* Contenido vacío para el pseudo-elemento */
    position: absolute; /* Posicionamiento absoluto dentro del enlace */
    width: 100%; /* Ancho completo del enlace */
    height: 4px; /* Altura de la línea */
    background-color: #63DEEF; /* Color de tu línea */
    bottom: -5px; /* Posición de la línea debajo del enlace */
    left: 0; /* Alineado a la izquierda */
}

.develop > a:hover {
    color: #63DEEF; /* Cambia el color de la letra al pasar el cursor */
}

.develop:hover > a {
  color: #63DEEF; /* Mantiene el color mientras el cursor esté sobre .develop */
}


   /*--------------------*/

.develop {
    position: relative;
   }
   
  
.container nav ul li .submenu{
    position: absolute;
    padding: 5px;
    background: var(--Menu);
    display: none;
    top: 100%; /* Posicionamos el submenú debajo del botón */
  left: 0%; /* Alineamos el submenú con el botón */
  z-index: 1; 
  text-align: left; /* Aliniamos el texto a la izquierda */
 }

  .container nav ul li .submenu sub-menu{
    justify-content: center;
     width: 100%;
     background-color: #1877F2;
  }

.container nav ul li .submenu img{
vertical-align:middle;
width: 65px; height: 35px;
margin-right: -11px;
}

.container nav ul li:hover .submenu{
    display: flex;
    border-radius: 10px;
     align-items: center;
      justify-content: start;
      padding: 7px;
       flex-wrap: wrap;
}



.container nav ul li .submenu a {
  font-size: 15px;
}

/* Estilo para el título de los submenús */
.container nav ul li .submenu h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding-bottom: 10px;
  color: #333;
  /* Añadir alineación vertical y horizontal */
  display: flex; /* Convertir el título en un flex container */
  align-items: center; /* Centrar verticalmente dentro del título */
  justify-content: center; /* Centrar horizontalmente dentro del título */
}
.container nav ul li .submenu .sub-menu {
  width: 100%; /* Los submenús ocupan todo el ancho */
  display: block; /* Los submenús se apilan verticalmente */
  border-right: none; /* Elimina el borde derecho */
}

.container nav ul li .submenu .sub-menu:not(:last-child) {
  border-bottom: 4px solid white; /* Añade un borde inferior para separar las secciones */
  padding-right: 0; /* Restablece el padding derecho */
  margin-right: 0; /* Restablece el margen derecho */
  padding-bottom: 15px; /* Espacio adicional al final de cada sección */
  margin-bottom: 15px; /* Espacio adicional después de cada sección */
}

/* Estilo general para todos los subtítulos */
.container nav ul li .submenu h3 {
  background-color: white; /* Fondo blanco para todos los subtítulos */
  padding: 10px; /* Espaciado interno para los subtítulos */
  color: black; /* Color predeterminado del texto */
  /* Otros estilos que desees aplicar a los subtítulos */
}

/* Estilos específicos para cambiar el color de la letra de cada subtítulo */
.container nav ul li .submenu .sub-menu:nth-child(1) h3 {
  color: #63DEEF; /* Color de la letra para 'Sector Comercial' */
}

.container nav ul li .submenu .sub-menu:nth-child(2) h3 {
  color: #A211CD; /* Color de la letra para 'Servicios y Otros' */
}

.container nav ul li .submenu .sub-menu:nth-child(3) h3 {
  color: #48D107; /* Color de la letra para 'Procesos Electrónicos' */
}


/* TRINGULOS DE LA IZQUIRDA*/

.triangulo_trans {
  width: 300px;
  height: 400px;
  background-color: transparent;
  transform: rotate(38deg) skewX(14deg) skewY(20deg);
  position: relative;
  top: -630px;
  left: -250px;
  border-width: 8px;
  border-style: solid;
  border-image: linear-gradient(to right top,#6C8FF8  50%, #63DEEF) 1;
}
.triangulo_azul {
 width: 320px;
 height: 420px;
 background-image: linear-gradient(to right top, #6C8FF8 50%, #63DEEF);
 position: absolute;
 top: 15px;
 left: -50px;
 border-width: 8px;
  border-style: solid;
  border-image: linear-gradient(to right top,#6C8FF8  50%, #63DEEF) 1;
}

/* Logo*/
.logoE {
  max-width: 280px;
  max-height: 280px;
  margin: 0px 50px;
  background-color: rgb(255, 255, 255);
  position: relative;
  left: 45px;
 bottom: 1280px;
  text-align: center;
 }
 
 .logoE .imagen {
  width: 190px;
  height: 100px;
  object-fit: cover;
 }

 .logoE h2 {
  color: #1877F2; /* Cambia el color del texto a #63DEEF */
  margin-top: -20px;
}


/* Flechas de los slider */
.triangulo i {
 top: 35%;
 height: 46px;
 width: 46px;
 font-size: 1.2rem;
 position: absolute;
 cursor: pointer;
 text-align: center;
 line-height: 46px;
 background: var(--DIz1);
 border-radius: 90%;
}

.triangulo i:first-child {
 left: 60px;
}

.triangulo i:last-child {
 right: 0px;
}

/* TRIANGULO 1*/
.triangulo{
  display: flex;
  
}
.triangulo .slider1 { 
 white-space: nowrap;
 cursor: pointer;
 overflow: hidden;
 
}
.slider1 {
 max-width: 160px;
 max-height: 160px;
 margin: 0 50px;
 background-color: rgb(255, 255, 250);
 transform: rotate(45deg);
 border: 5px solid var(--Restaurante);
 position: absolute;
 right: -15px;
 top: 410px;
 text-align: center;
}

.slider1 ul {
 display: flex;
 padding: 0;
}

.slider1 .imagen {
 width: 160px;
 height: 160px;
 object-fit: cover;
}

/*triangulo 2 */

.triangulo2 .slider2 {
 white-space: nowrap;
 cursor: pointer;
 overflow: hidden;
}

.slider2 ul {
 display: flex;
 padding: 0;
}

.slider2 {
 max-width: 70px;
 max-height: 70px;
 margin: 0 50px;
 background-color: rgb(255, 255, 250);
 transform: rotate(45deg);
 border: 5px solid var(--Restaurante);
 position: absolute;
 right: 220px;
 top: 460px;
 text-align: center;
}

.slider2 .imagen {
 width: 70px;
 height: 70px;
 object-fit: cover;
}

/* TRIANGULO 3*/
.triangulo3 .slider3 {
 white-space: nowrap;
 cursor: pointer;
 overflow: hidden;
}

.slider3 ul {
 display: flex;
 padding: 0;
}

.slider3 {
 max-width: 70px;
 max-height: 70px;
 margin: 0 50px;
 background-color: rgb(255, 255, 250);
 transform: rotate(45deg);
 border: 5px solid var(--Restaurante);
 position: absolute;
 right: 150px;
 top: 530px;
 text-align: center;
}

.slider3 .imagen {
 width: 70px;
 height: 70px;
 object-fit: cover;
}

/* TRIANGULO 4*/

.triangulo4 .slider4 {
 white-space: nowrap;
 cursor: pointer;
 overflow: hidden;
}

.slider4 ul {
 display: flex;
 padding: 0;
}

.slider4 {
 max-width: 70px;
 max-height: 70px;
 margin: 0 50px;
 background-color: rgb(255, 255, 250);
 transform: rotate(45deg);
 border: 5px solid var(--Restaurante);
 position: absolute;
 right: 80px;
 top: 600px;
 text-align: center;
}

.slider4 .imagen {
 width: 70px;
 height: 70px;
 object-fit: cover;
}

/* Letras en movimiento */
.letras {
  display: flex;
  width: 10px;
  height: 1px;
  font-size: 15px;
  line-height: 10px;
  position: relative;
  left: -30px;
  top: -360px;
  margin: auto;
  background-color: transparent;
  font-weight: bolder;
}

.letras ul {
  list-style: none;
  padding-left: 10px;
}

.letras li {
  display: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(50px); /* Inicialmente mueve las letras hacia abajo */
}

.letras li.active {
  display: block;
  transform: translateY(0); /* Muestra la letra al moverla hacia arriba */
}


/* Hexagonos */
.hexagono {
 position: relative;
 width: 120px;
 height: 170px;
 top: 1000px;
 left: 70px;
 transform: translate(-50%, -50%);
 background: transparent;
 border: none;
 overflow: hidden;
}
.hexagono img {
 position: absolute;
 top: 0;
 left: -30px;
 width: 150%;
 height: 100%;
 object-fit: contain;
 cursor: pointer;
}
.hexagono2 {
   position: relative;
   width: 120px;
   height: 270px;
   top: 770px;
   left: 170px;
   transform: translate(-50%, -50%);
   background: transparent;
   border: none;
   overflow: hidden;
  }
        
  .hexagono2 img {
   position: absolute;
   top: 0;
   left: -30px;
   width: 150%;
   height: 100%;
   object-fit: contain;
   cursor: pointer;
  }

   .hexagono4 {
   position: relative;
   width: 120px;
   height: 170px;
   top: 440px;
   left: 70px;
   transform: translate(-50%, -50%);
   background: transparent;
   border: none;
   overflow: hidden;
  }
        
   .hexagono4 img {
   position: absolute;
   top: 0;
   left: -30px;
   width: 150%;
   height: 100%;
   object-fit: contain;
   cursor: pointer;
  }

  /* Carrusel de noticias */
  .carrusel {
    margin: 0 auto;
    width: 80%;
    overflow: hidden;
    position: relative; /* O 'absolute' dependiendo de tu estructura */
    top: -480px;
}

.carrusel-imagenes {
    display: flex;
    width: 300%;
    transition: transform 0.5s ease;
}

.carrusel-imagenes img {
    width: 33.333%;
    flex-shrink: 0;
    max-height: 400px;
}



/*  footer */
footer {
 width: 100%;
 background-color: #EB3136;
 position:relative;
 top: 250px;
 font-size: 16px;
 color: var(--Blanco);
}

span.info img {
 height: 2.2em;
 padding-top: 7px;
 padding-right: 1px;
}

footer .pie {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.info {
 display: flex;
 align-items: center;
 margin-right: 10px;
 bottom: 0;
}

.pie p {
 font-size: 1.0em;
} 

/* Estilos del div que contiene la lista */
.mesa {
  width: 100%;
  height: auto;
  display: flex;
  background-color: #1877F2;
  justify-content: center;
  align-items: center;
}

/* Estilos de la lista */
.zegundo {
  font-size: 14px;
  /* Elimina la altura fija */
  width: 100%;
  background-color: #EB3136;
  color: #FFFFFF;
  text-align: center;
  overflow: hidden;
  position: relative;
  white-space: normal;
  word-wrap: break-word;
  /* Agrega flex para centrar el contenido */
  display: flex;
  flex-direction: column; /* Organiza los elementos de la lista en una columna */
  justify-content: center;
  align-items: center;
}

.zegundo ul {
  list-style: none;
  padding: 0;
  position: relative;
}

.zegundo p {
  margin: 0;
  padding: 0;
  max-height: 100%;
  overflow: hidden;
  word-break: break-word; /* Ajuste de palabra */
}

.zegundo ul li {
  animation: slide-up 1s;
}

.text{
  columns: auto 12em;
  text-overflow:ellipsis;
}

/*    boton de mas informacion*/

button {
  background: linear-gradient(to left, var(--BotonI), var(--BotonD));
  cursor: pointer;
  border: none;
  border-radius: 20px;
  bottom: 420px;
  left: 180px;
  font-size: 11px;
  font-weight: bold;
  position: relative;
  /* Corrección del padding */
  padding: 6px 8px; /* Sin coma, especificar las unidades para cada lado */
  /* Centrar vertical y horizontalmente */
  display: flex;
  justify-content: space-between; /* Espacio entre contenido (imagen y texto) */
  align-items: center;
  flex-direction: row-reverse; /* Coloca la imagen al lado derecho */
}

/* Tamaño de la imagen igual al tamaño de la fuente */
button img {
  width: 38px;
  height: 18px;
  margin-left: 0px; /* Opcional: para agregar un pequeño espacio entre la imagen y el texto */
}



/* Estilos para el contenedor principal */
.contenido {
  position: relative;
  display: flex;   /* Añadido */
  align-items: center;  /* Añadido */
  text-align: center;
  margin-bottom: 40px;
  bottom: 240px;
  flex-wrap: wrap; /* Añadido: permite que los elementos se ajusten al siguiente renglón si no caben en el actual */
}

/* Estilos para el título */
.titulo {
  font-size: 15px;
  font-weight: bold;
  margin-right: -40px; /* Añadido: da un poco de espacio entre el título y los subtítulos */
}

/* Estilos para los subtítulos */
.subtitulos {
  height: 20px;
  /* Altura fija para que se muestre solo un subtitulo a la vez */
  overflow: hidden;
  position: relative;
  flex-grow: 1; /* Añadido: permite que los subtítulos ocupen todo el espacio restante */
}

/* Estilos para las imágenes */
.imagenes-container {
  display: flex;
  cursor: pointer;
  justify-content: center;
  /* Alinea las imágenes al inicio */
  max-width: 400px;
  /* Ancho total de las imágenes */
  margin: 0 auto;
  /* Centra el contenedor horizontalmente */
  width: 100%; /* Añadido: ocupa todo el ancho disponible */
}

.imagen {
  width: 110px;
  height: 110px;
  object-fit: contain;
  /* Ajusta la imagen al contenedor sin recortarse */
  margin-right: 5px;
  /* Espacio entre imágenes (opcional) */
}

.subtitulo {
  font-size: 15px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Aplica un color de fondo al subtitulo */
  color: #1877F2;
  animation-name: slide-up;
  animation-duration: 3s; /* Reduce el tiempo de animación */
}

/* Animación para los subtítulos */
@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.subtitulo {
  /* Agrega la animación */
  animation: slide-up 1s;
}

  /*-----------Medida -------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 400px) {
 h1 {
   font-size: 1.3em;
  }
 
  h2 {
   font-size: 1.0em;
  }
 
  /*-----------Boton flotante */
  .flotante {
   bottom: 170px;
   right: 10px;
  }

  /* Flechas de los slider */
  .triangulo i {
   top: 38%;
   height: 45px;
   width: 45px;
   line-height: 45px;
  }
  .triangulo i:first-child {
    left: 110px;
   }
  
   .triangulo i:last-child {
    left: 350px;
   }
/*Letras de arriba del slider */
   .letras {
    left: -30px;
    top: -280px;
   }

  /* triangulo trasparente */
  .triangulo_trans {
   width: 320px;
   height: 420px;
   top: -550px;
   left: -265px;
  }
 
  .triangulo_azul {
   width: 320px;
   height: 420px;
   top: 40px;
   left: -50px;
  }
 
  .logoE {
   max-width: 330px;
   max-height: 340px;
   left: 50px;
   bottom: 1280px;
  }
 
  .logoE .imagen {
   width: 200px;
   height: 100px;
  }
 
  .container nav ul li .submenu{
    left: -40%; /* Alineamos el submenú con el botón */
    }
 
  /* TRIANGULO 1*/
  .slider1 {
   max-width: 180px;
   max-height: 180px;
   right: -10px;
   top: 440px;
  }
 
  .slider1 .imagen {
   width: 180px;
   height: 180px;
  }
 
  /*triangulo 2 */
  .slider2 {
   max-width: 82px;
   max-height: 82px;
   right: 250px;
   top: 490px;
  }
 
  .slider2 .imagen {
   width: 82px;
   height: 82px;
  }
 
  /* TRIANGULO 3*/
 
  .slider3 {
   max-width: 82px;
   max-height: 82px;
   right: 180px;
   top: 565px;
  }
 
  .slider3 .imagen {
   width: 82px;
   height: 82px;
  }
 
  /* TRIANGULO 4*/
  .slider4 {
   max-width: 82px;
   max-height: 82px;
   right: 105px;
   top: 638px;
  }
 
  .slider4 .imagen {
   width: 82px;
   height: 82px;
  }
 
  /* Footer*/
  footer {
   top: 340px;
   font-size: 16px;
  }
 
  .info {
   margin-bottom: 5px;
 
  }
 
  footer .pie {
   flex-direction: column;
 
  }

    /* Carrusel de noticias */
    .carrusel {
      top: -390px;
  }
 
  /* hexagano*/
  .hexagono {
   width: 130px;
   height: 180px;
   top: 1070px;
   left: 70px;
  }
 
  .hexagono img {
   top: 0;
   left: -30px;
   width: 150%;
   height: 100%;
  }
 
  .hexagono2 {
   width: 130px;
   height: 180px;
   top: 830px;
   left: 170px;
  }
 
  .hexagono2 img {
   top: 0;
   left: -30px;
   width: 150%;
   height: 100%;
  }
 
  .hexagono4 {
   width: 130px;
   height: 180px;
   top: 590px;
   left: 70px;
  }
 
  .hexagono4 img {
   top: 0;
   left: -35px;
   width: 150%;
   height: 100%;
  }

  .mesa {
   width: 100%;
   height: auto;
   display: flex;
   background-color: #1877F2;
   justify-content: center;
   align-items: center;
  }
 
  /* Estilos de la lista */
  .zegundo {
   font-size: 14px;
   height: 40px;
  }

 
  /* Ajustar los párrafos al div y ocultar el exceso de texto */
  .zegundo p {
   margin: 0;
   padding: 0;
   max-height: 100%;
   overflow: hidden;
  }
  /*    boton de mas informacion*/
 
  button {
   top: -340px;
   left: 210px;
   font-size: 15px;
   /* Corrección del padding */
   padding: 8px 6px;
  }

  /* Estilos para el contenedor principal */
  .contenido {
   top: -110px;
   text-align: center;
   justify-content: center;
  }
 
  .titulo {
    margin-left: 100px; /* Añadido: da un poco de espacio entre el título y los subtítulos */
  }
 
  .subtitulo {
   font-size: 15px;
   font-weight: bold;
   margin: 0;
   padding: 0;
  }
 
  /* Estilos para las imágenes */
  .imagenes-container {
   display: flex;
   justify-content: center;
   /* Alinea las imágenes al inicio */
   max-width: 550px;
   max-height: 300px;
   /* Ancho total de las imágenes */
   margin: 0 auto;
   /* Centra el contenedor horizontalmente */
  }
 
  .imagen {
   width: 130px;
   height: 130px;
   object-fit: contain;
  }
 
}

        /*-----------Medida------------------------------------------------------------------------------ */
@media screen and (min-width: 500px) {
   h1 {
     font-size: 1.3em;
    }
   
    h2 {
     font-size: 1.0em;
    }

    p{font-size: 2.0em;}
   
    /*-----------Boton flotante */
    .flotante {
     position: fixed;
     bottom: 180px;
     right: 10px;
    }
   
    /* Flechas de los slider */
    .triangulo i {
     top: 38%;
     height: 45px;
     width: 45px;
     line-height: 45px;
    }
   
    .triangulo i:first-child {
     left: 160px;
    }
   
    .triangulo i:last-child {
     left: 430px;
    }
   
    /* triangulo trasparente */
    .triangulo_trans {
     width: 330px;
     height: 430px;
     top: -540px;
     left: -275px;
    }
   
    .triangulo_azul {
     width: 330px;
     height: 430px;
     top: 40px;
     left: -50px;
    }
   
    .logoE {
     max-width: 450px;
     max-height: 330px;
     left: 50px;
     bottom: 1340px;
    }
   
    .logoE .imagen {
     width: 200px;
     height: 100px;
    }
  
   
    /* TRIANGULO 1*/
    .slider1 {
     max-width: 180px;
     max-height: 180px;
     right: 30px;
     top: 450px;
    
    }
   
    .slider1 .imagen {
     width: 180px;
     height: 180px;
    }
   
    /*triangulo 2 */
    .slider2 {
     max-width: 82px;
     max-height: 82px;
     right: 310px;
     top: 490px;
    }
   
    .slider2 .imagen {
     width: 82px;
     height: 82px;
    }
   
    /* TRIANGULO 3*/
   
    .slider3 {
     max-width: 82px;
     max-height: 82px;
     right: 230px;
     top: 570px;
    }
   
    .slider3 .imagen {
     width: 82px;
     height: 82px;
    }
   
    /* TRIANGULO 4*/
    .slider4 {
     max-width: 82px;
     max-height: 82px;
     right: 150px;
     top: 650px;
    }
   
    .slider4 .imagen {
     width: 82px;
     height: 82px;
    }
   
    /* Footer*/
    footer {
     top: 350px;
     font-size: 18px;
    }
   
    .info {
     margin-bottom: 8px;
   
    }
   
    footer .pie {
     flex-direction: column;
   
    }

     /* Carrusel de noticias */
     .carrusel {
      top: -420px;
  }
   
    /* hexagano*/
    .hexagono {
     width: 130px;
     height: 180px;
     top: 1070px;
     left: 80px;
    }
   
    .hexagono img {
     top: 0;
     left: -30px;
     width: 150%;
     height: 100%;
    }
   
    .hexagono2 {
     width: 130px;
     height: 180px;
     top: 820px;
     left: 180px;
    }
   
    .hexagono2 img {
     top: 0;
     left: -30px;
     width: 150%;
     height: 100%;
    }
   
    .hexagono4 {
     width: 130px;
     height: 180px;
     top: 580px;
     left: 80px;
    }
   
    .hexagono4 img {
     top: 0;
     left: -35px;
     width: 150%;
     height: 100%;
    }
      .mesa {
       width: 100%;
       height: auto;
       display: flex;
       justify-content: center;
       align-items: center;
      }
   
      /* Estilos de la lista */
      .zegundo {
       font-size: 8px;
       height: 40px;
      }
   
   
      /* Ajustar los párrafos al div y ocultar el exceso de texto */
      .zegundo p {
       margin: 0;
       padding: 0;
       max-height: 100%;
       overflow: hidden;
      }
   
      /*    boton de mas informacion*/
   
      button {
   
       border-radius: 20px;
       top: -300px;
       left: 290px;
       font-size: 15px;
       /* Corrección del padding */
       padding: 10px 15px;
      }
   
   
   
      /* Estilos para el contenedor principal */
      .contenido {
       top: -90px;
       text-align: center;
       margin-bottom: 40px;
      }
   
      /* Estilos para el título */
      .titulo {
       font-size: 19px;
       margin-left: 110px;
      }
   
      /* Estilos para los subtítulos */
      .subtitulos {
       height: 21px;
      }
   
      .subtitulo {
       font-size: 19px;
       font-weight: bold;
       margin: 0;
       padding: 0;
      }
   
      /* Estilos para las imágenes */
      .imagenes-container {
       display: flex;
       justify-content: center;
       /* Alinea las imágenes al inicio */
       max-width: 600px;
       /* Ancho total de las imágenes */
       margin: 0 auto;
       /* Centra el contenedor horizontalmente */
      }
   
      .imagen {
       width: 150px;
       height: 150px;
       object-fit: contain;
      }
.letras{
  top: -310px;
  left: 10px;
}
}

        /*-----------Medida------------------------------------------------------------------------------ */
@media screen and (min-width: 600px) {
   h1 {
     font-size: 1.8em;
    }
   
    h2 {
     font-size: 1.2em;
    }

    p{font-size: 2.0em;}

    /*-----------Boton flotante */
    .flotante {
     position: fixed;
     bottom: 180px;
     right: 20px;
    }
   
   
   
   
    /* Flechas de los slider */
    .triangulo i {
     top: 45%;
     height: 45px;
     width: 45px;
     line-height: 45px;
    }
   
    .triangulo i:first-child {
     left: 200px;
    }
   
    .triangulo i:last-child {
     left: 500px;
    }

    .letras{
      font-size: 21px;
      top: -250px;
      left: -30px;
    }
   
    /* triangulo trasparente */
    .triangulo_trans {
     width: 330px;
     height: 430px;
     top: -540px;
     left: -260px;
    }
   
    .triangulo_azul {
     width: 330px;
     height: 430px;
     top: 40px;
     left: -50px;
    }
   
    .logoE {
     max-width: 500px;
     max-height: 300px;
     left: 70px;
     bottom: 1300px;
    }
   
    .logoE .imagen {
     width: 200px;
     height: 100px;
    }
   
    /* TRIANGULO 1*/
    .slider1 {
     max-width: 200px;
     max-height: 200px;
     right: 40px;
     top: 500px;
     
    }
   
    .slider1 .imagen {
     width: 200px;
     height: 200px;
    }
   
    /*triangulo 2 */
    .slider2 {
     max-width: 100px;
     max-height: 100px;
     right: 380px;
     top: 520px;
    }
   
    .slider2 .imagen {
     width: 100px;
     height: 100px;
    }
   
    /* TRIANGULO 3*/
   
    .slider3 {
     max-width: 100px;
     max-height: 100px;
     right: 290px;
     top: 610px;
    }
   
    .slider3 .imagen {
     width: 100px;
     height: 100px;
    }
   
    /* TRIANGULO 4*/
    .slider4 {
     max-width: 100px;
     max-height: 100px;
     right: 200px;
     top: 700px;
    }
   
    .slider4 .imagen {
     width: 100px;
     height: 100px;
    }

     /* Carrusel de noticias */
     .carrusel {
      top: -360px;
      width: 60%;
  }
   
    /* Footer*/
    footer {
     top: 390px;
     font-size: 18px;
    }
   
    .info {
     margin-bottom: 8px;
   
    }
   
    footer .pie {
     flex-direction: column;
   
    }
   
    /* hexagano*/
    .hexagono {
     width: 130px;
     height: 180px;
     top: 1100px;
     left: 95px;
    }
   
    .hexagono img {
     top: 0;
     left: -30px;
     width: 150%;
     height: 100%;
    }
   
    .hexagono2 {
     width: 130px;
     height: 180px;
     top: 860px;
     left: 210px;
    }
   
    .hexagono2 img {
     top: 0;
     left: -30px;
     width: 150%;
     height: 100%;
    }
   
    .hexagono4 {
     width: 130px;
     height: 180px;
     top: 610px;
     left: 100px;
    }
   
    .hexagono4 img {
     top: 0;
     left: -35px;
     width: 150%;
     height: 100%;
    }
      .mesa {
       width: 100%;
       height: auto;
       display: flex;
       justify-content: center;
       align-items: center;
      }
   
      /* Estilos de la lista */
      .zegundo {
       font-size: 8px;
       height: 40px;
      }
   
   
      /* Ajustar los párrafos al div y ocultar el exceso de texto */
      .zegundo p {
       margin: 0;
       padding: 0;
       max-height: 100%;
       overflow: hidden;
      }
   
      /*    boton de mas informacion*/
   
      button {
       top: -270px;
       left: 300px;
       font-size: 15px;
       /* Corrección del padding */
       padding: 10px 20px;
      }
   
   
   
      /* Estilos para el contenedor principal */
      .contenido {
       top: -50px;
       text-align: center;
       margin-bottom: 40px;
       left: 100px;
      }
   
      /* Estilos para el título */
      .titulo {
       font-size: 19px;
      }
   
      /* Estilos para los subtítulos */
      .subtitulos {
       height: 21px;
       /* Altura fija para que se muestre solo un subtitulo a la vez */
       overflow: hidden;
   
      }
   
      .subtitulo {
       font-size: 20px;
       font-weight: bold;
       margin: 0;
       padding: 0;
      }
   
      /* Estilos para las imágenes */
      .imagenes-container {
       display: flex;
       justify-content: center;
       /* Alinea las imágenes al inicio */
       max-width: 650px;
       /* Ancho total de las imágenes */
       margin: 0 auto;
       /* Centra el contenedor horizontalmente */
      }
   
      .imagen {
       width: 200px;
       height: 200px;
       object-fit: contain;
      }
 
}